<template>
  <label class="r-radio">
    <span class="r-radio--outer">
      <span class="r-radio--inner" :class="{'is-checked':isChecked}">
        <input
          type="radio"
          :value="label"
          v-model="radioValue"
          class="r-radio--native"
        />
      </span>
      <span class="r-radio--label">
        {{ label }}
      </span>
    </span>
  </label>
</template>

<script>
export default {
  name: "w-radio",
  props: {
    value: {
      type: [String, Number],
    },
    label: {
      type: [String, Number],
    },
  },
  computed:{
      isGroup(){
          return this.RadioGroup
      },
      radioValue:{
          get(){
              return this.isGroup? this.RadioGroup.value:this.value
          },
          set(value){
              if(this.isGroup){
                  this.RadioGroup.$emit('input',value)
              }else{
                  this.$emit('input',  value);
              }
              
          }
      },
      isChecked(){
          return this.radioValue===this.label
      }
  },
  inject:{
      RadioGroup:{
          default:''
      }
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style scoped>
</style>